<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>{% if config and config.site_name %}{{ config.site_name|safe }}{% endif %}</title>
    <link rel="stylesheet" type="text/css" href="../static/css/home.css">
    <link rel="stylesheet" type="text/css" href="../static/css/nekotora.css">
	<link rel="icon" href="../static/favicon.ico" type="image/x-icon">
    
    <!-- 先加载背景动效脚本 -->
    <script src="../static/js/background-effects.js"></script>
    
    <!-- 背景动效配置 -->
    <script>
        // 全局背景动效配置变量，供其他脚本使用
        window.backgroundEffect = '{{ config.background_effect if config else "stars" }}'; // 从后台配置读取
        // 健壮的背景图片URL配置，优先使用数据库配置，同时提供回退值
        window.backgroundImageUrl = '{{ config.background_image_url if config and config.background_image_url else "" }}';
        
        // 详细日志记录
        console.log('Background effect initialized with:');
        console.log('- Effect type:', window.backgroundEffect);
        console.log('- Background image URL:', window.backgroundImageUrl);
        
        // 为调试目的，添加切换背景效果的辅助函数
        window.testBackgroundEffect = function() {
            console.log('Testing background effect');
            // 确保refreshBackgroundEffect方法可用后再调用
            setTimeout(() => {
                window.backgroundEffect = 'stars';
                if (window.switchBackgroundEffect) {
                    window.switchBackgroundEffect('stars');
                } else if (window.refreshBackgroundEffect) {
                    window.refreshBackgroundEffect();
                }
            }, 100);
        };
        
        // 配置已完成，保留最小化的错误检查
        if (!window.backgroundImageUrl || window.backgroundImageUrl.trim() === '') {
            console.warn('使用了默认背景图片URL');
        }
        
        // 页面加载完成后执行
          document.addEventListener('DOMContentLoaded', function() {
              // 背景效果初始化已由background-effects.js负责
              // 搜索功能已移至search.js文件中实现
          });
    </script>
</head>

<body>
    <div class="background">
        <!-- 背景动效容器，根据配置动态切换 -->
        <div id="background-container">
            <canvas id="background-canvas"></canvas>
        </div>
        <div class="cover"></div>
    </div>
    <div class="main">
        <div class="ch intro">
            <div class="container">
                <div class="hello">
                    <!-- <img src="picture/avatar.jpg" class="avatar" /> -->
                    <h1 id="slogan">{% if titles %}{{ titles|random|attr('content')|safe }}{% else %}...{% endif %}</h1>
                </div>
                
                <!-- 搜索框 -->
                {% if search_engines and search_engines|length > 0 %}
                <div class="search-container my-6">
                    <div class="input-group mb-3" style="position: relative; display: flex; align-items: stretch; width: 100%;">
                        <!-- 搜索引擎选择器 -->
                        <div class="search-engine-selector" style="display: inline-flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #ced4da; border-right: none; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; padding: 0 12px; height: 48px; cursor: pointer;">
                            <img id="current-search-engine-icon" src="" alt="搜索引擎" style="width: 24px; height: 24px; object-fit: contain; cursor: pointer;">
                        </div>
                        <!-- 搜索输入框 -->
                        <input type="text" id="search-input" class="form-control form-control-lg search-input" placeholder="输入搜索内容..." style="border-radius: 0; border-left: none; border-right: none; height: 46px; padding: 0 16px; font-size: 16px;">
                        <!-- 搜索按钮 -->
                        <div class="input-group-append" style="display: flex; height: 48px; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; align-items: center; justify-content: center;">
                            <button id="search-button" class="btn search-button" style="background-color: transparent; border: none; height: 100%; width: 100%; padding: 0; font-size: 20px; display: flex; align-items: center; justify-content: center; min-width: 48px; line-height: 1; vertical-align: middle;">🔍</button>
                        </div>
                    </div>
                </div>
                {% endif %}
                <div class="readme">
                    {% if config and config.site_description %}
                    <p>
                        {{ config.site_description|safe }}
                    </p>
                    {% endif %}
                    {% if config and config.personal_intro %}
                    <p>
                        <span class="b">你好，我是子鞍<sup>@Dove</sup></span><br> {{ config.personal_intro|safe }}
                    </p>
                    {% endif %}
                    <p>
                        如果对我感兴趣，可以<a href="javascript:rollOnce()">点击这里</a>Roll一个关于我的标签，<br> 在下面的社交媒体关注我，也欢迎直接发邮件找我聊聊。
                    </p>
                    <div class="roll-tag"></div>
                    <p>希望能与你在比特之海的繁星之下相见！</p>
                </div>
                <style>
                    /* 确保.readme区域内所有段落文本大小一致 */
                    .readme p {
                        font-size: 1.1rem;
                        letter-spacing: .15em;
                        line-height: 1.8em;
                    }
                    
                    /* 响应式调整 */
                    @media screen and (max-width: 768px) {
                        .readme p {
                            font-size: 1rem;
                            letter-spacing: .1em;
                        }
                    }
                    
                    @media screen and (max-width: 480px) {
                        .readme p {
                            font-size: 0.9rem;
                            letter-spacing: .08em;
                        }
                    }
                </style>

                <div class="find-me">
                    {% if contacts %}
                        {% for contact in contacts %}
                        <a class="item" href="{{ contact.url }}" target="_blank">
                            <i class="neko-icon icon-{{ contact.icon }}"></i>
                            <span>{{ contact.name }}</span>
                        </a>
                        {% endfor %}
                    {% endif %}
                </div>

            </div>
        </div>

        <div class="ch clear">
            <div class="container">
                <div class="enter-list">
                    {% if links %}
                        {% set categories = links|groupby('category')|list %}
                        {% for category, _ in categories %}
                        <a class="item" href="javascript:nav('friends', '{{ category }}')">
                            <div class="text">{{ category }}</div>
                            <div class="bg">
                                <div class="rounded">
                                    <svg width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
								<circle cx="50" cy="50" r="50" fill="url(#paint0_linear)"/>
								<defs>
								<linearGradient id="paint0_linear" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse">
								<stop stop-color="white"/>
								<stop offset="1" stop-color="white" stop-opacity="0"/>
								</linearGradient>
								</defs>
								</svg>

                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    {% else %}
                    <a class="item" href="javascript:nav('friends', '')">
                        <div class="text">朋友们</div>
                        <div class="bg">
                            <div class="rounded">
                                <svg width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
								<circle cx="50" cy="50" r="50" fill="url(#paint0_linear)"/>
								<defs>
								<linearGradient id="paint0_linear" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse">
								<stop stop-color="white"/>
								<stop offset="1" stop-color="white" stop-opacity="0"/>
								</linearGradient>
								</defs>
								</svg>

                            </div>
                        </div>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="gate ch gate-friends">
        <div class="container links">
            <div class="ch-content">
                {% if links %}
                        {% set links_by_category = links|groupby('category') %}
                        {% for category, category_links in links_by_category %}
                            <div class="category-section category-{{ category|lower|replace(' ', '-') }}">
                                <div class="category-links">
                                    {% for link in category_links %}
                                    <a href="{{ link.url }}" target="_blank">
                                        <div class="item" style="height: auto; min-height: 102px; padding: 17px; display: flex; align-items: center; transform: scale(0.85); transform-origin: left top;">
                                            <div class="avatar" style="width: 68px !important; height: 68px !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; margin-right: 17px; background-color: #353535; position: relative; overflow: hidden; float: none !important;">
                                                {% if link.icon and (link.icon.startswith('/uploads/') or link.icon.startswith('/static/uploads/')) %}
                                                <!-- 显示上传的图片图标 -->
                                                <img src="{{ link.icon }}" alt="{{ link.name }}" style="width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50% !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; max-width: none !important; max-height: none !important;">
                                                {% else %}
                                                <!-- 显示图标类名 -->
                                                <i class="neko-icon icon-{{ link.icon|default('link') }}" style="font-size: 41px !important; position: relative; z-index: 1; margin: 0 !important;"></i>
                                                {% endif %}
                                            </div>
                                            <div class="inner">
                                                <h5>{{ link.name }}</h5>
                                                {% if link.description %}
                                            <p>{{ link.description|replace('\n', '<br>')|safe }}</p>
                                            {% endif %}
                                            </div>
                                        </div>
                                    </a>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
                
                <div class="clear" style="margin-top: 0;">
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="footer ch">
        <div class="container">
            <p>我们走过风走过雨，就是没能走进彼此的内心。</p>
            <p>版权信息归属:{% if config and config.copyright_info %}{{ config.copyright_info|safe }}{% else %}{% endif %}</p>
            <p>{% if config and config.icp_record %}<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{{ config.icp_record }}</a>{% endif %}</p>
        </div>
    </div>
    <script src="../static/js/zepto.min.js"></script>
    <script src="../static/js/search.js"></script>
    <script>
        // 从后端传递的标签数据
        window.tagsFromServer = JSON.parse('{{ tags|map(attribute="name")|list|tojson|safe if tags else "[]" }}');
    </script>
    <script src="../static/js/page.js"></script>
    
</body>

</html>